<template>
	<view class="wrap">
		<view class="login-panel">
			<view class="header">
				<u--image src="/static/face.jpg" width="36px" height="36px" radius="5"></u--image>
				<view class="welcome">欢迎登录</view>
			</view>

				<view class="inform">
					为了验证用户登录信息，小程序将获取您的手机号
				</view>
				
				<button type="primary" class="login-btn" open-type="getPhoneNumber" 
					:disabled="loginBtnDisabled" @getphonenumber="getPhoneNumber">微信登录</button>
				
				<view class="agreement">
					<u-checkbox-group shape="circle" size="12" activeColor="#ccc" 
						v-model="agree" @change="agreeChange">
						<u-checkbox name="1"></u-checkbox>
					</u-checkbox-group>
					<view>我已阅读并同意《隐私政策》</view>
				</view>
		
		</view>
	</view>	
</template>

<script>
import { loginCode, wxAccessToken, wxPhoneLogin } from "@/api/app.js";	
export default {
	data() {
		return {
			loginBtnDisabled: false,
			agree: ['1']
		}
	},
	methods: {
		getPhoneNumber(event) {
			if(event.detail.errMsg !== 'getPhoneNumber:ok') {
				uni.showToast({
					icon: "none",
					title: '允许获取才能登录'
				});
				return;
			}
			
			uni.showLoading({
				title: '登录中...'
			});
			
			let phoneCode = event.detail.code;
			wxAccessToken().then(res1=>{
				let accessToken = res1.data.accessToken;
				wxPhoneLogin(accessToken, phoneCode).then(res2=>{
					console.log("=== token:" + res2.data.token);
					uni.hideLoading();
					
					uni.setStorage({
						key: 'token',
						data: res2.data.token,
						success: function(){
							uni.navigateBack();
						}	
					});
				});
				
			});
		},
		agreeChange(values) {
			console.log("====len:" + this.agree.length);
			console.log('change', values);
			if(values.length <= 0) {
				this.loginBtnDisabled = true;
				uni.showToast({
					icon: "none",
					title: '不同意条款将无法登录'
				});
			} else {
				this.loginBtnDisabled = false;
			}
			
		}
	}
}	
</script>

<style lang="less">

.login-panel {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 600rpx;
	height: 300px;
	
	.header {
		display: flex;
		flex-direction: row;
		align-items: center;
		
		.welcome {
			font-size: 24px;
			margin-left: 10px;
		}
	}
	
	.inform {
		margin-top: 10px;
		font-size: 12px;
		color: #acacac;
	}
	
	.login-btn {
		background: #1aad19;
		height: 42px;
		font-size: 16px;
		margin: 25px 0;
	}
	
	.agreement {
		display: flex;
		flex-direction: row;
		justify-content: center;
		font-size: 12px;
		color: #ccc;
	}
}

	
</style>